<!-- 
  @name: 充值
  @date: 2020.1.7
  @note: 支付成功后就关闭本页面，跳转至支付成功页
 -->
<template>
	<view class="content">
		<!-- 充值数目 -->
		<view class="amount">
			<view
				class="item"
				v-for="(item, index) in lists"
				:key="index"
				:class="numIndex === index ? 'sl' : ''"
				@tap="chooseNum(item, index)"
			>
				<view class="icon" v-if="item.recd">荐</view>
				<view class="top-1">
					<text class="t1">充值:</text>
					<text class="t2">￥</text>
					<text class="t3">{{ item.chargeMoney }}</text>
				</view>
				<view class="top-2" v-if="item.sendMoney">
					<text>多送 {{ item.sendMoney }}元</text>
				</view>
			</view>
		</view>
		<view class="charge-tip">
			<view class="item">充值到账后，在加注时请选择账户余额进行支付</view>
			<view class="item">账户余额可绑定加注卡，持卡人在加注机插卡即可支付</view>
			<view class="item">可在“个人中心-团队管理”中设置其他成员使用你的账户余额</view>
		</view>
		<!-- 支付方式 -->
		<view class="title">支付方式</view>
		<view class="way">
			<view class="icon"></view>
			<view class="text">微信支付</view>
			<view class="check_box _ck1"></view>
		</view>

		<!-- 确认支付按钮 -->
		<button class="btn_submit" @tap="paySubmit">确认支付：{{ chargeMoney }}元</button>
		<view class="tip-submit">
			温馨提示：充值不提供发票，加注后可申请邮寄纸质增值税专用 发票或在线开电子发票
		</view>

		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>

export default {
	components: {  },
	data() {
		return {
			operaId: 0, //运营商id
			recordCode: '', //充值单号
			numIndex: -1, //选中金额的序号
			lists: [], //金额数组
			chargeMoney: 0, //充值金额
			sendMoney: 0 //赠送金额
		};
	},
	onLoad(e) {
		this.operaId = e.operaId;
		this.getList();
	},
	methods: {
		//点击金额
		chooseNum(item, index) {
			this.numIndex = index;
			this.chargeMoney = item.chargeMoney;
			this.sendMoney = item.sendMoney;
		},
		//获取订单信息
		getInfo() {
			this.$http({
				url: this.$api.exchargeUrl + 'getpayinfobycode',
				data: {
					recordCode: this.recordCode,
					payClass: 'PayClass2'
				}
			}).then(res => {
				uni.$emit('userAcc_regpay', {
					total: this.$operation(this.chargeMoney, '+', this.sendMoney)
				});
				this.$store.commit('setTmpData', JSON.stringify(res));

				uni.redirectTo({ url: './paysuc' });
			});
		},
		//微信客户端支付
		wxpay(data) {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign,
				success: res => {
					this.getInfo();
				},
				fail: err => {
					let error = JSON.stringify(err);
					if (error.indexOf('cancel') === -1) {
						this.$showToast('支付失败：' + JSON.stringify(err));
					}
				}
			});
		},
		//确认支付
		paySubmit() {
			if (parseFloat(this.chargeMoney) <= 0) {
				this.$showToast('请选择充值金额！');
				return;
			}
			this.$http({
				url: this.$api.exchargeUrl + 'userrecharge',
				data: {
					operaId: this.operaId,
					chargeMoney: parseFloat(this.chargeMoney),
					sendMoney: parseFloat(this.sendMoney)
				}
			}).then(res => {
				this.recordCode = res.recordCode;
				this.wxpay(res);
			});
		},
		//获取充值金额列表
		getList() {
			this.$http({
				url: this.$api.exchargeUrl + 'exchargerulelist',
				data: {
					operaId: this.operaId
				}
			}).then(data => {
				let obj = {};
				if (!data) return;
				if (data.enableOne && data.chargeOneVal && parseFloat(data.chargeOneVal) > 0) {
					obj = {};
					obj.chargeMoney = data.chargeOneVal;
					obj.sendMoney = data.sendOneVal;
					obj.recd = true; //推荐
					this.lists.push(obj);
				}
				if (data.enableTwo && data.chargeTwoVal && parseFloat(data.chargeTwoVal) > 0) {
					obj = {};
					obj.chargeMoney = data.chargeTwoVal;
					obj.sendMoney = data.sendTwoVal;
					this.lists.push(obj);
				}
				if (
					data.enableThree &&
					data.chargeThreeVal &&
					parseFloat(data.chargeThreeVal) > 0
				) {
					obj = {};
					obj.chargeMoney = data.chargeThreeVal;
					obj.sendMoney = data.sendThreeVal;
					this.lists.push(obj);
				}
				if (data.enableFour && data.chargeFourVal && parseFloat(data.chargeFourVal) > 0) {
					obj = {};
					obj.chargeMoney = data.chargeFourVal;
					obj.sendMoney = data.sendFourVal;
					this.lists.push(obj);
				}
				if (data.enableFive && data.chargeFiveVal && parseFloat(data.chargeFiveVal) > 0) {
					obj = {};
					obj.chargeMoney = data.chargeFiveVal;
					obj.sendMoney = data.sendFiveVal;
					this.lists.push(obj);
				}
				if (data.enableSix && data.chargeSixVal && parseFloat(data.chargeSixVal) > 0) {
					obj = {};
					obj.chargeMoney = data.chargeSixVal;
					obj.sendMoney = data.sendSixVal;
					this.lists.push(obj);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 充值数目 */
.amount {
	padding: 15rpx;
	background-color: $color-white;
	.item.sl {
		background: #dffaf0;
		border: 1rpx solid #0dc887;
	}
	.item {
		display: inline-block;
		width: 330rpx;
		padding-bottom: 48rpx;
		margin: 15rpx 15rpx;
		box-shadow: $box-shadow;
		border: 1rpx solid $color-white;
		border-radius: $border-radius-sm;
		background-color: $color-white;
		position: relative;
		.icon {
			width: 56rpx;
			height: 43rpx;
			line-height: 42rpx;
			text-align: center;
			color: $color-white;
			font-size: 30rpx;
			position: absolute;
			top: -1rpx;
			left: -1rpx;
			background-color: #fe4a4a;
			border-radius: $border-radius-sm 0;
		}
		.top-1 {
			width: 100%;
			margin-top: 48rpx;
			text-align: center;
			.t1 {
				font-size: 30rpx;
			}
			.t2 {
				font-size: 36rpx;
				margin-left: 8rpx;
			}
			.t3 {
				margin-left: 10rpx;
				font-size: 50rpx;
				font-family: $font-family-num;
			}
		}
		.top-2 {
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
			color: $color-grey-dark;
			font-size: 30rpx;
		}
	}
}
// 充值提示
.charge-tip {
	padding: 20rpx 0 20rpx 60rpx;
	background-color: #ffffff;
	.item {
		font-size: 24rpx;
		color: #666666;
		position: relative;
		margin: 10rpx 0;
		&::after {
			content: '';
			width: 4rpx;
			height: 4rpx;
			background-color: #666666;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: -30rpx;
			transform: translateY(-50%);
		}
	}
}

/* 支付方式 */
.title {
	width: 750rpx;
	padding: 21rpx 30rpx;
	font-size: 30rpx;
}
.way {
	width: 750rpx;
	height: 108rpx;
	padding: 0 30rpx;
	background-color: $color-white;
	display: flex;
	flex-direction: row;
	align-items: center;
	.icon {
		width: 37rpx;
		height: 34rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAfaAfviLAAAExE2fs40189.png');
	}
	.text {
		flex: 1;
		margin-left: 28rpx;
		font-size: 30rpx;
	}
}

/* 支付按钮 */
.btn_submit {
	margin-top: 70rpx;
}
.tip-submit {
	font-size: 24rpx;
	color: $color-grey;
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-bottom: 70rpx;
	margin: 30rpx 30rpx 70rpx 30rpx;
}
</style>
